import React,{useState} from 'react'
import { Form, Input, Modal, Select, message,Row ,Col, Button, Spin, Checkbox} from 'antd';
import request from '@/http';
import SecurityService from '@/pages/login/service';
import { history } from '@/.umi/core/history';
import {
    UserOutlined,
    LockOutlined,
  } from '@ant-design/icons';
import Registration from './registration';
const { Option } = Select;
interface EditObject {
    isModalVisible: boolean
  }

const Login=(props: { editObject: EditObject})=> {
    const { editObject} = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  const onFinish = async (values: any) => {
    // history.push('/admin/studentInformation');
    setspinning(true);
    await request.post('api/Users/Login'+'?account='+values.userNo+'&password='+values.password)
    .then((response: any)=>{
      console.log(response);
      if (response.code == '200') {
        setspinning(false);
        SecurityService.saveSecurity({userSex:response.data.userSex,userAge:response.data.userAge,userTelphone:response.data.userTelphone,id:response.data.id,name:response.data.userName,token:response.data.token,role:response.data.role})
        if(response.data.role==0){
          history.push('/admin/studentInfo');
        }else if(response.data.role==1){
          history.push('/teacher/questionBank');
        }else{
            setIsModalVisible(false);
            history.push('/student/studentHome');
        }
        
      }else {
        setspinning(false);
        message.error(response.message);
      }
    })
  };

  const [currentEditObject, setCurrentEditObject] =
    React.useState<EditObject>({
      isModalVisible: false,
    });

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
  }, [editObject]);

  const [spinning, setspinning] = useState(false);
  return (
    <>
      <Modal
        width={500}
        title='登录'
        visible={isModalVisible}
        onCancel={modelOnCancel}
        maskClosable={false}
        destroyOnClose
        style={{ top: '20vh' }}
        footer={false}
      >
        <Spin spinning={spinning} size="large">
          <Col span={24} >
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ roleType: '1', remember: true }}
              onFinish={onFinish}
              form={formObject}
            >
              <Form.Item
                name="userNo"
                rules={[{ required: true, message: '请输入你的账号!' }]}
              >
                <Input
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="账号"
                />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入你的密码!' }]}
              >
                <Input.Password
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  placeholder="密码"
                />
              </Form.Item>
              <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                  <Checkbox>记住密码</Checkbox>
                </Form.Item>
                <Button type='link' onClick={() => {
                    setCurrentEditObject({
                        isModalVisible: true
                      });
                      setIsModalVisible(false);
                  }}
                >注册</Button>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" id="loginButton">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Col>
          </Spin>
      </Modal>
      <Registration editObject={currentEditObject}></Registration>
    </>
  )
}
export {EditObject,Login };